<template>
	<div class="agent-portrait-page">
		<!--查询条件-->
		<div class="search-wrap">
			<h-select class="search-type" v-model="formItem.queryType" :clearable="false" @on-change="searchTypeChange">
				<h-option value="1">本月</h-option>
				<h-option value="2">本年</h-option>
				<h-option value="3">自定义</h-option>
			</h-select>
			<h-date-picker v-show="formItem.queryType == '3'" v-model="formItem.time"  type="daterange" placeholder="请选择" class="date-range"></h-date-picker>
			<h-button class="search-btn" @click="search">查询</h-button>
		</div>
		<!--card 列表-->
		<div class="card-list">
			<div class="card-item base-info">
				<div class="left-module">
					<svg-icon iconClass="user" class="user-img"></svg-icon>
					<div class="contact">
						<span>王绮恒</span><svg-icon iconClass="male" class="male-icon"></svg-icon>
					</div>
					<div>工号：12876</div>
				</div>
				<div class="right-module">
					<div class="border-text">团队：风创团队</div>
					<div class="border-text">联系方式：18976876632</div>
					<div class="border-text">邮箱：1290334786@qq.com</div>
				</div>
			</div>
			<div class="card-item">
				<div class="item-type">考勤类</div>
				<div class="item-content-wrap">
					<div class="item-content">
						<div><span class="number">22</span><span class="unit">次</span></div>
						<div class="content-type">考勤次数</div>
					</div>
					<div class="item-content">
						<div><span class="number">8.02</span><span class="unit">小时</span></div>
						<div class="content-type">平均时长</div>
					</div>
				</div>
				<svg-icon iconClass="settled"></svg-icon>
			</div>
			<div class="card-item">
				<div class="item-type">成交类</div>
				<div class="item-content-wrap">
					<div class="item-content">
						<div><span class="number">300</span><span class="unit">万元</span></div>
						<div class="content-type">保费收入</div>
					</div>
					<div class="item-content">
						<div><span class="number">35</span><span class="unit">件</span></div>
						<div class="content-type">主险件数</div>
					</div>
				</div>
				<svg-icon iconClass="settled"></svg-icon>
			</div>
			<div class="card-item">
				<div class="item-type">学习类</div>
				<div class="item-content-wrap">
					<div class="item-content">
						<div><span class="number">206</span><span class="unit">小时</span></div>
						<div class="content-type">学习时长</div>
					</div>
					<div class="item-content">
						<div><span class="number">49</span><span class="unit">次</span></div>
						<div class="content-type">线下培训次数</div>
					</div>
				</div>
				<svg-icon iconClass="settled"></svg-icon>
			</div>
		</div>
		<!--分析类-->
		<div class="analysis-list">
			<div class="analysis-item">
				<div class="item-title" style="margin-bottom: 26px;">展业行为分析</div>
				<square-radar-chart :chartData="radarData"></square-radar-chart>
			</div>
			<div class="analysis-item">
				<div class="item-title">客户黏性</div>
				<div class="customer-number-level">
					<div class="level">
						<span class="type">交流客户数</span>
						<span class="number">2003人</span>
						<span class="percent">76%</span>
					</div>
					<div class="level">
						<span class="type">拜访客户数</span>
						<span class="number">1500人</span>
						<span class="percent">64%</span>
					</div>
					<div class="level">
						<span class="type">新增准客户数</span>
						<span class="number">206人</span>
						<span class="percent">56%</span>
					</div>
					<div class="level">
						<span class="type">出单客户数</span>
						<span class="number">289人</span>
						<span class="percent">32%</span>
					</div>
				</div>
			</div>
			<div class="analysis-item">
				<div class="item-title">所属等级</div>
				<div class="level-box-wrap">
					<div class="level-box">
						<div class="label">产品销量多</div>
						<div class="label">人均互动多</div>
						<div class="label">客户数量多</div>
						<img :src="coordinatesImg" class="coordinates-img"/>
					</div>
				</div>
			</div>
		</div>
		<div class="analysis-list third-part">
			<div class="analysis-item">
				<div class="item-title" style="margin-bottom: 26px;">行为类</div>
				<area-chart :chartData="areaData"></area-chart>
			</div>
			<div class="analysis-item">
				<div class="item-title" style="margin-bottom: 26px;">客户类</div>
				<bar-chart :chartData="barData"></bar-chart>
			</div>
			<div class="analysis-item link-box">
				<div class="link-text" @click="toPage">
					查看团队信息<svg-icon iconClass="arrow-right" class="arrow-right"></svg-icon>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import coordinatesImg from '@/assets/images/coordinates.png'
import SquareRadarChart from '@/components/common/antv/square-radar-chart'
import AreaChart from '@/components/common/antv/area-chart'
import BarChart from '@/components/common/antv/bar-chart'
export default {
	name: 'AgentPortrait',
	components: {
		SquareRadarChart,
		AreaChart,
		BarChart
	},
	data() {
		return {
			coordinatesImg,
			formItem: {
				queryType: '1',
				time: []
			},
			// 雷达图数据
			radarData: [
				{ item: '建议书发送量', 数量: 70},
				{ item: '产品讲解数量', 数量: 60 },
				{ item: '免责申明告知书', 数量: 50 },
				{ item: '保障检视发送量', 数量: 45 },
				{ item: '健康告知数', 数量: 65},
				{ item: '总沟通时长', 数量: 60 },
			],
			// 面积图数据
			areaData: [
				{ type: '建议书发送量', value: 5 },
				{ type: '保障检视发送量', value: 40 },
				{ type: '产品讲解数量', value: 35 },
				{ type: '免责申明告知数', value: 46 },
				{ type: '客户投诉数', value: 20 },
				{ type: '名片发送数', value: 36 },
				{ type: '健康告知数', value: 33 },
				{ type: '总沟通时长', value: 56 },
			],
			// 柱形图数据
			barData: [
				{ type: '交流客户数', value: 2003 },
				{ type: '拜访客户数', value: 1500 },
				{ type: '新增准客户数', value: 206 },
				{ type: '出单客户数', value: 289 },
			]
		}
	},
	methods: {
		searchTypeChange(val) {
			console.log(val)
		},
		search() {
			console.log('search')
		},
		// 页面跳转
		toPage() {
			let pageObj = {
				uuid: 'TeamInfo', // 必填项， 页签唯一 Id
				url: '/team-info', // 页签跳转链接
				title: '团队信息', // 页签显示的 title
				tab_ext_field: {
					activeTabId: 'TeamInfo'
				},
				query: {
				}
			}
			this.$navigateFun(pageObj)
		}
	}
}
</script>

<style lang="scss" scoped>
.agent-portrait-page{
	background: #f0f2f5;
	min-height: 100%;
	padding: 8px 16px 16px;
	color: #434343;
	.search-wrap{
		display:flex;
		align-items: center;
		padding: 12px 16px;
		background: #fff;
		border-radius: 4px;
		margin-bottom: 16px;
		.search-type{
			width: 90px;
		}
		.date-range{
			margin-left: 16px;
			width: 406px;
		}
		.search-btn{
			background: #4686f2;
			border-color: #4686f2;
			color: #fff;
			border-radius: 0 2px 2px 0;
			padding: 4px 15px;
			margin-left: 16px;
		}
	}

	.card-list{
		display: flex;
		.card-item{
			color: #434343;
			flex: 1;
			margin-left: 16px;
			height: 172px;
			background: #FFFFFF;
			box-shadow: 0px 0px 8px 0px rgba(138,193,255,0.38);
			border-radius: 8px;
			padding: 16px 0 0 20px;
			background-position: bottom right;
			background-size: 132px 149px;
			background-repeat: no-repeat;
			&.base-info{
				width: 360px;
				flex: none;
				flex-shrink: 0;
				margin-left: 0px;
				color: #FFFFFF;
				background-position: 0px;
				background-size: 100%;
				background-image: linear-gradient(135deg, #869EFF 0%, #3F6CFC 100%);
				display: flex;
				padding-left: 0px;
				padding-top: 20px;
    		justify-content: center;
				.left-module{
					text-align: center;
					.user-img{
						width: 84px;
						height: 84px;
					}
					line-height: 1;
					.contact{
						margin: 12px 0 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						.male-icon{
							width: 10px;
							height: 10px;
							margin-left: 6px;
						}
					}
				}
				.right-module{
					margin-left: 20px;
					.border-text{
						width: 212px;
						background-image: linear-gradient(90deg, rgba(142,187,255,0.26) 0%, rgba(255,255,255,0.10) 100%);
						border-radius: 4px;
						margin-bottom: 15px;
						line-height: 34px;
						text-align: center;
					}
				}
			}
			&:nth-child(2) {
				background-image: url(../assets/images/attendance.png);
				
			}
			&:nth-child(3) {
				background-image: url(../assets/images/settled.png);
				
			}
			&:nth-child(4) {
				background-image: url(../assets/images/learn.png);
				
			}
			.item-type{
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 32px;
			}
			.item-content-wrap{
				display: flex;
				position: relative;
				justify-content: center;
				padding-left: 20px;
				.item-content{
					flex:1;
					.number{
						font-size: 30px;
						line-height: 1;
						color: #3D74FE;
						background: -webkit-linear-gradient(top, #84FFF7, #5A85FF);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
						margin-right: 10px;
					}
					.unit{
						color: #777777;
					}
					.content-type{
						margin-top: 8px;
					}
				}
			}
		}
	}

	.analysis-list{
		display: flex;
		margin-top: 16px;
		&.third-part{
			.analysis-item{
				height: 314px;
			}
		}
		.analysis-item{
			flex: 1;
			margin-left: 16px;
			background: #FFFFFF;
			border-radius: 8px;
			height: 374px;
			padding: 16px 20px 0 20px;
			&:nth-child(1) {
				margin-left: 0;
			}
			&.link-box {
				width: 198px;
				flex:unset;
				display: flex;
				align-items: center;
				justify-content: center;
				.link-text{
					color: #4686F2;
					cursor: pointer;
					.arrow-right{
						width: 14px;
						height: 14px;
						margin-left: 6px;
					}
				}
			}
			.item-title{
				font-size: 16px;
				line-height: 22px;
				font-weight: bold;
			}
			.level-box-wrap{
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(100% - 22px);
				.level-box{
					position: relative;
					width: 281px;
					height: 182px;
					img{
						width: 100%;
					}
					.label{
						position: absolute;
						&:nth-child(1) {
							top: -24px;
    					left: 108px;
						}
						&:nth-child(2) {
							left: -41px;
    					top: 123px;
						}
						&:nth-child(3) {
							right: -36px;
    					bottom: 17px;
						}
					}
				}
			}
			.customer-number-level{
				width: 454px;
				height: 222px;
				margin: 58px auto 0;
				background-image: url(../assets/images/funnel-bg.png);
				background-size: 100% 100%;
				.level{
					line-height: 48px;
					margin-bottom: 10px;
					display: flex;
					.type{
						width: 298px;
						text-align: center;
						color: #FFFFFF;
					}
					.number{
						width: 89px;
						padding-left: 18px;
					}
					.percent{
						color: #DD7641;
					}
				}
			}
		}
	}
}
</style>